<template>
  <SnPopup
    mode="center"
    v-bind="$attrs"
    v-model="show"
    :round="16"
    :showCancelButton="false"
    :showConfirmButton="false"
  >
    <view class="real-name-authentication-modal">
      <view class="modal-header">
        <text class="modal-title">{{ title }}</text>
        <up-icon
          name="close"
          size="20"
          color="#999"
          @click="closeModal"
          class="close-icon"
        ></up-icon>
      </view>
      <view class="instructions">
        <up-icon
          v-if="showIcon"
          :name="iconName"
          :size="iconSize"
          :color="iconColor"
          class="tips-icon"
        ></up-icon>
        <text>{{ content }}</text>
      </view>
      <view class="success-btns" v-if="displayButtons?.length">
        <up-button
          v-for="(button, index) in displayButtons"
          :key="index"
          :type="button.type"
          :text="button.text"
          :disabled="button.disabled"
          @click="handleButtonClick(button)"
        />
      </view>
    </view>
  </SnPopup>
</template>

<script setup>
import { ref, defineExpose, defineProps, defineEmits, computed } from "vue";
import SnPopup from "@/components/common/snPopup.vue";

const props = defineProps({
  title: {
    type: String,
    default: "温馨提示",
  },
  content: {
    type: String,
    default: "为了您的账户安全，请先进行实名认证",
  },
  // 图标相关配置
  showIcon: {
    type: Boolean,
    default: true,
  },
  iconName: {
    type: String,
    default: "error-circle-fill",
  },
  iconColor: {
    type: String,
    default: "#ff6b35",
  },
  iconSize: {
    type: [String, Number],
    default: "20",
  },
  // 按钮配置
  buttons: {
    type: Array,
    default: () => [],
  },
  // 默认跳转页面
  defaultNavigateUrl: {
    type: String,
    default: "/pages/realNameAuthentication/realNameAuthentication",
  },
});

const emit = defineEmits(["buttonClick", "close"]);

// 打开弹窗
const show = ref(false);
const openModal = () => {
  show.value = true;
};

const closeModal = () => {
  show.value = false;
  emit("close");
};

// 计算显示的按钮
const displayButtons = computed(() => {
  // 如果用户没有自定义按钮，显示默认的确定按钮
  if (props.buttons.length === 0) {
    return [
      {
        text: "确定",
        type: "primary",
        action: "confirm",
        disabled: false,
      },
    ];
  }
  return props.buttons;
});

// 处理按钮点击
const handleButtonClick = (button) => {
  // 触发按钮点击事件
  emit("buttonClick", button);

  // 根据按钮配置执行相应操作
  if (button.action === "close" || button.action === "cancel") {
    closeModal();
  } else if (button.action === "navigate" && button.url) {
    uni.navigateTo({
      url: button.url,
    });
    closeModal();
  } else if (button.action === "confirm" && !button.url) {
    // 默认跳转到实名认证页面
    uni.navigateTo({
      url: props.defaultNavigateUrl,
    });
    closeModal();
  } else if (button.action === "custom" && button.handler) {
    // 自定义处理函数
    button.handler();
  }
};

defineExpose({
  openModal,
  closeModal,
});
</script>

<style lang="scss" scoped>
.real-name-authentication-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  .modal-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    position: relative;

    .modal-title {
      font-size: var(--font-size-md);
      font-weight: 600;
      padding-bottom: 40rpx;
    }
    .close-icon {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: 0;
    }
  }

  .instructions {
    color: #666;
    margin-bottom: 60rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;

    .tips-icon {
      flex-shrink: 0;
    }
  }

  .success-btns {
    display: flex;
    gap: 30rpx;
    width: 80%;
    justify-content: center;
  }
}
</style>
